<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8"/>
    <title>图片列表</title>
    <link rel="stylesheet" href="http://cdn.staticfile.org/element-ui/2.13.1/theme-chalk/index.css">
</head>
<body>

<div id="app">

    <el-link icon="el-icon-upload" href="/upload.html">上传图片</el-link>
    <button @click="batchDownLoadZip('test')">下载压缩包</button>
    <a :href="'/minio/batchDownLoadZip?bucket=test'" class="el-icon-download">下载压缩包</a>
    <a :href="'/minio/batchDownload?bucket=test'" class="el-icon-download">压缩包</a>
    <br/>

    <el-table :data="results" stripe style="width: 60%" @row-click="preview">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="fileName" label="文件名" width="180"></el-table-column>
        <el-table-column prop="fileSize" label="文件大小"></el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <button @click="downLoad(scope.row.fileName)">下载</button>
                <button @click="downLoadZip(scope.row.fileName)">下载压缩包</button>
                <a :href="'/minio/download?fileName=' + scope.row.fileName + ''" class="el-icon-download">下载</a>
                <a :href="'/minio/downLoadZip?fileName=' + scope.row.fileName + ''" class="el-icon-download">下载压缩包</a>
                <a :href="'/minio/delete?fileName=' + scope.row.fileName + ''" @click.prevent="deleteFile($event,scope.$index,results)"
                   class="el-icon-delete">删除</a>
            </template>
        </el-table-column>
    </el-table>

    <br/>
    <el-link icon="el-icon-picture">预览图片</el-link>
    <br/>
    <div class="demo-image__preview" v-if="previewImg">
        <el-image style="width: 100px; height: 100px" :src="imgSrc" :preview-src-list="imgList"></el-image>
    </div>

</div>

<script src="http://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>
<script src="http://cdn.staticfile.org/axios/0.19.2/axios.min.js"></script>
<script src="http://cdn.staticfile.org/element-ui/2.13.1/index.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            bucketURL: 'http://127.0.0.1:9000/test/',
            previewImg: true,
            results: [],
            imgSrc: '',
            imgList: []
        },
        methods: {
            init() {
                axios.get('/minio/fileList').then(response => {
                    if(response.data.code == 200){
                        this.results = response.data.list
                        if (this.results.length == 0) {
                            this.imgSrc = '';
                            this.previewImg = false;
                        } else {
                            for (var i = 0; i < this.results.length; i++) {
                                this.imgList.push(this.bucketURL + this.results[i].fileName);
                                if (i == 0) {
                                    this.imgSrc = this.bucketURL + this.results[0].fileName;
                                }
                            }
                        }
                    }
                });
            },
            downLoad(name) {
                console.log(name,"=================================================")
                axios({method: 'get',url: '/minio/download',params: {fileName:name},responseType: 'blob',headers: {}}).then(response=>{
                    console.log(response,"-----------------------------------------------------")
                    const blob = new Blob([response.data]);
                    const link = document.createElement("a");
                    link.download = decodeURI(
                        response.headers["content-disposition"].replace(/.*filename=/, "")
                    ); //后端可以将文件名放在headers中返回
                    link.style.display = "none";
                    link.href = URL.createObjectURL(blob);
                    document.body.appendChild(link);
                    link.click();
                    URL.revokeObjectURL(link.href);
                    document.body.removeChild(link);
                })
                /*axios.get('/minio/download?fileName='+name).then(response => {
                    console.log(response,"-----------------------------------------------------")
                    const blob = new Blob([response.data]);
                    const link = document.createElement("a");
                    link.download = decodeURI(
                        response.headers["content-disposition"].replace(/.*filename=/, "")
                    ); //后端可以将文件名放在headers中返回
                    link.style.display = "none";
                    link.href = URL.createObjectURL(blob);
                    document.body.appendChild(link);
                    link.click();
                    URL.revokeObjectURL(link.href);
                    document.body.removeChild(link);
                });*/
            },
            downLoadZip(name) {
                axios({method: 'get',url: '/minio/downLoadZip',params: {fileName:name},responseType: 'blob',headers: {}}).then(response=>{
                    const blob = new Blob([response.data]);
                    const link = document.createElement("a");
                    // link.download = decodeURI(
                    //     response.headers["content-disposition"].replace(/.*filename=/, "")
                    // ); //后端可以将文件名放在headers中返回
                    link.style.display = "none";
                    link.href = URL.createObjectURL(blob);
                    link.setAttribute('download', name.split("/")[1].split(".")[0]+".zip");
                    document.body.appendChild(link);
                    link.click();
                    URL.revokeObjectURL(link.href);
                    document.body.removeChild(link);
                })
                /*axios.get('/minio/downLoadZip?fileName='+name,null,{responseType: "blob",}).then(response => {
                    console.log(response,"-----------------------------------------------------")
                    const blob = new Blob([response.data]);
                    const link = document.createElement("a");
                    link.download = decodeURI(
                        response.headers["content-disposition"].replace(/.*filename=/, "")
                    ); //后端可以将文件名放在headers中返回
                    link.style.display = "none";
                    link.href = URL.createObjectURL(blob);
                    document.body.appendChild(link);
                    link.click();
                    URL.revokeObjectURL(link.href);
                    document.body.removeChild(link);
                });*/
            },
            batchDownLoadZip(name) {
                console.log(name,"------------------------------------")
                axios({method: 'get',url: '/minio/batchDownLoadZip',params: {bucket:name},responseType: 'blob',headers: {}}).then(response=>{
                    const blob = new Blob([response.data]);
                    const link = document.createElement("a");
                    link.style.display = "none";
                    link.href = URL.createObjectURL(blob);
                    link.setAttribute('download', name+".zip");
                    document.body.appendChild(link);
                    link.click();
                    URL.revokeObjectURL(link.href);
                    document.body.removeChild(link);
                    console.log("========================================", link)
                })
            },
            preview(row, event, column) {
                this.imgSrc = this.bucketURL + row.fileName;
                this.previewImg = true;
            },
            deleteFile(e,index,list) {
                axios.delete(e.target.href, {}).then(res => {
                    if (res.data.code == 200) {
                        this.$message('删除成功！');
                        list.splice(index, 1);
                        this.previewImg = false;
                    } else {
                        this.$message('删除失败！');
                    }
                });
            }
        },
        mounted() {
            this.init();
        }
    });
</script>

</body>
</html>